<template>
  <div class="banner">
    <div @click="showSwiper">
      <div class="banner-img">
        <img src="http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_600x330_5d562f69.jpg" alt="">
      </div>
      <div class="banner-title">
        金海湖风景区(AAAA景区)
      </div>
    </div>
    <div class="img-swiper" v-show="imgSwiper" @click="hideSwiper">
      <!--<img src="http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_600x330_5d562f69.jpg" alt="">-->
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <img :src="item.imgUrl" alt="">
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination"  slot="pagination"></div>
    </div>
  </div>
</template>

<script>
  export default {
	name: "Banner",
    data(){
	    return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            type:"fraction"
          }
        },
        imgSwiper: false,
        bannerList:[
          {
            id:"01",
            imgUrl:"http://img1.qunarzz.com/sight/p0/1609/e4/e45d9cb483478459a3.water.jpg_r_800x800_a044eb00.jpg"
          },
          {
            id:"02",
            imgUrl:"http://img1.qunarzz.com/sight/p0/1609/e4/e45d9cb483478459a3.water.jpg_r_800x800_a044eb00.jpg"
          },
          {
            id:"03",
            imgUrl:"http://img1.qunarzz.com/sight/p0/1609/e4/e45d9cb483478459a3.water.jpg_r_800x800_a044eb00.jpg"
          }
        ],
      }
    },
    methods: {
      showSwiper(){
        this.imgSwiper = true;
      },
      hideSwiper(){
        this.imgSwiper = false;
      }
    }
  }
</script>

<style scoped>
  .banner{
    position: relative;
  }
  .banner-img{
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 55%;
  }
  .banner-img img{
    width: 100%;
  }
  .banner-title{
    position: absolute;
    left: .3rem;
    bottom: .4rem;
    font-size: .36rem;
    color: #fff;
  }
  .img-swiper{
    background: #000;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img-swiper img{
    width: 100%;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom:.6rem;
    font-size:.32rem;
    color:#fff;
  }
</style>
